.home-banner{
  min-height: var(--rem-360);
  &.home-banner-h5{
    min-height: var(--rem-175);
  }
}
.home-activity{
  margin-top: var(--rem-10);
}
.home-content-wrapper{
  max-width: 1250px;
  margin: 0 auto 0;
}
.home-section{
  margin: var(--rem-35) var(--rem-10) 0;
  h1.home-section__title{
    font-size: var(--rem-22);
    margin-bottom: var(--rem-15);
    font-weight: bold;
    color: var(--z-font-anti);
    span{
      &.green{
        color: #5eed06;
      }
      &.orange{
        color: orange;
      }
    }
  }
}

.add-app-to-desk{
  position: fixed;
  bottom: var(--rem-70);
  z-index: 99;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  span{
    display: inline-block;
    height: var(--rem-35);
    color: var(--z-font-white);
    line-height: var(--rem-35);
    border-radius: var(--rem-30);
    font-style: normal;
    font-weight: 700;
    padding: 0 var(--rem-25);
    background-color: var(--bg-pbtn);
  }
}
.add-to-desk-popup{
  h1,
  h2,
  ul>li{
    display: flex;
  }
}

.jackpot{
  background-color: var(--z-bg-card);
  padding: var(--rem-20);
  border-radius: var(--rem-30);
  .jackpot-content{
    position: relative;
    img{
      display: block;
      margin: 0 auto 0;
    }
    .jackpot-content-title{
      position: absolute;
      left: 0;
      right: 0;
      top: -40rem;
      span{
        font-size: var(--rem-35);
        color: var(--z-font-anti);
        font-weight: 700;
        position: absolute;
        left: 0;
        right: 0;
        top: 2rem;
        text-align: center;
      }
    }
    .jackpot-wrapper{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      .jackpot-ranking{
        transform: translateY(var(--rem-40));
        &.ranking0{
          .jackpot-ranking-box{
            h3{
              color: #fccf10;
              margin-top: var(--rem-50);
            }
            h4{
              background-color: #9f3481;
              color: #fff;
            }
          }
        }
        .jackpot-ranking-box{
          position: relative;
          p{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            position: absolute;
            .jprank{
              transform: translate(-2rem, -2rem);
            }
          }
          h3{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: var(--rem-40);
            font-weight: 500;
            font-size: var(--rem-20);
            position: relative;
          }
          h4{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 8rem 12rem;
            background-color: var(--z-bg-card);
            width: 70%;
            margin: var(--rem-10) auto 0;
            border-radius: var(--rem-20);
            font-weight: 700;
            font-size: var(--rem-16);
            color: var(--z-font-anti);
            img{
              width: var(--rem-20);
              height: var(--rem-20);
              margin: 0 var(--rem-10) 0 0;
            }
          }
        }
        img.raning-pic{
          width: var(--rem-70);
          height: var(--rem-70);
          transform: translate(var(--rem-2-n), var(--rem-6));
        }
        &.ranking1{
          width: var(--rem-230);
          height: var(--rem-229);
          background: url("") no-repeat;
          background-size: contain;
          background-position: 50% 0;
        }
        &.ranking0{
          width: var(--rem-242);
          height: var(--rem-278);
          background: url(../../assets/images/home/jackpot/pcrank1.png) no-repeat;
          background-size: contain;
          background-position: 50% 0;
          margin: 0 var(--rem-10);
          img.raning-pic{
            width: var(--rem-90);
            height: var(--rem-90);
            transform: translate(var(--rem-1-n), var(--rem-8));
          }
        }
        &.ranking2{
          width: var(--rem-230);
          height: var(--rem-229);
          background: url("") no-repeat;
          background-size: contain;
          background-position: 50% 0;
        }
      }
    }
  }
}

.jackpot-h5{
  background: url(../../assets/images/home/jackpot/rankBg.png) no-repeat;
  background-size: 100% auto;
  h1{
    padding-top: var(--rem-44);
    text-align: center;
    font-weight: 700;
    font-size: var(--rem-20);
    color: #fff;
    box-sizing: border-box;
  }
  ul{
    display: flex;
    justify-content: space-around;
    margin-top: var(--rem-65);
    li{
      position: relative;
      background-size: contain;
      box-sizing: border-box;
      background-position: 50% 0;
      background-repeat: no-repeat;
      padding-top: var(--rem-20);
      .raning-pic{
        width: var(--rem-60);
        height: var(--rem-60);
        margin: 0 auto 0;
      }
      p{
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: center;
        top: var(--rem-70);
        .jprank{
          display: block;
          transform: translateX(-2rem);
        }
      }
      h3{
        text-align: center;
        margin-top: var(--rem-30);
      }
      h4{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 75%;
        margin: 0 auto 0;
        background: var(--bg-winner-h5);
        font-size: var(--rem-12);
        color: var(--z-font-anti);
        height: var(--rem-30);
        border-radius: var(--rem-30);
        margin-top: var(--rem-4);
        line-height: 1;
        img{
          width: var(--rem-15);
          height: var(--rem-15);
          margin-right: var(--rem-5);
        }
      }
      &.jackpot-rank1{
        width: var(--rem-100);
        height: var(--rem-200);
        transform: translateY(var(--rem-12));
        background-image: url(../../assets/images/home/jackpot/rank2.png);
      }
      &.jackpot-rank0{
        width: var(--rem-115);
        height: var(--rem-221);
        padding-top: var(--rem-10);
        background-image: url(../../assets/images/home/jackpot/rank1.png);
        .raning-pic{
          width: var(--rem-75);
          height: var(--rem-75);
        }
      }
      &.jackpot-rank2{
        width: var(--rem-100);
        height: var(--rem-200);
        transform: translateY(var(--rem-12));
        background-image: url(../../assets/images/home/jackpot/rank3.png);
      }
    }
  }
}

.vipclub{
  display: flex;
  justify-content: space-between;
  margin-top: var(--rem-60);
  li{
    width: 100%;
    box-sizing: border-box;
    padding: var(--rem-20);
    background: var(--z-bg-card);
    border-radius: var(--rem-20);
    position: relative;
    cursor: pointer;
    &+li{
      margin-left: var(--rem-13);
    }
    .home-vip-info{
      position: absolute;
      top: var(--rem-64);
      left: var(--rem-37);
      .home-vip__title{
        font-size: var(--rem-20);
        font-weight: 600;
        width: var(--rem-130);
        color: var(--z-font-white);
        white-space: nowrap;
      }
      .home-vip__desc{
        line-height: 1.2;
        font-size: var(--rem-12);
        margin-top: var(--rem-18);
        font-weight: 500;
        color: rgba(255,255,255,0.6);
        width: var(--rem-165);
      }
    }
    .home-vip-bg{
      display: block;
    }
    .home-vip-logo{
      display: block;
      position: absolute;
      top: var(--rem-50);
      right: var(--rem-30);
      max-width: 45%;
      &.vip-logo-3{
        right: var(--rem-50);
        top: var(--rem-54);
      }
    }
  }
}
.vipclub-h5{
  p{
    position: relative;
    img{
      display: block;
      width: 100%;
      margin: 0 auto 0;
    }
    h2{
      position: absolute;
      font-weight: 600;
      font-size: var(--rem-20);
      color: var(--z-font-anti);
      top: var(--rem-29);
      left: var(--rem-20);
      span{
        display: block;
        color: var(--z-bg-act);
      }
    }
    h3{
      display: flex;
      align-items: center;
      background: linear-gradient(89.25deg,#fbe360 -79.2%,var(--bg-act) 101.39%);
      box-shadow: inset 0 2px 2px hsla(0,0%,100%,.25);
      border-bottom-left-radius: var(--rem-12);
      border-bottom-right-radius: var(--rem-12);
      padding: var(--rem-12) var(--rem-20);
      .home-vip__title{
        font-weight: 500;
        font-size: var(--rem-14);
        color: #fff;
        span{
          display: block;
          margin-top: 10rem;
          font-weight: 500;
          font-size: var(--rem-12);
          color: hsla(0,0%,100%,.7);
        }
      }
    }
  }
  .view{
    margin-left: auto;
    background: #fff;
    font-weight: 600;
    font-size: var(--rem-13);
    padding: var(--rem-7) var(--rem-20);
    border-radius: var(--rem-20);
    color: var(--z-bg-act);
    white-space: nowrap;
  }
  li{
    background-color: var(--z-bg-card);
    border-radius: 24rem;
    display: flex;
    padding: var(--rem-7) var(--rem-7);
    align-items: center;
    text-align: left;
    border: 2px solid var(--border-prm-h5);
    margin-top: var(--rem-15);
    .view{
      color: var(--z-font-def);
    }
    h4{
      font-weight: 500;
      font-size: var(--rem-13);
      color: var(--z-font-anti);
      text-shadow: 0 2px 6rem rgba(38,0,81,.2);
      margin-left: var(--rem-10);
      margin-right: var(--rem-10);
      max-width: 50%;
      line-height: 1;
      span{
        display: block;
        margin-top: var(--rem-5);
        font-weight: 500;
        font-size: var(--rem-11);
        color: var(--z-font-def);
      }
    }
  }
}

.contactus{
  background-color: var(--bg-tab);
  border-radius: var(--rem-20);
  padding-top: var(--rem-10);
  border: 2px solid var(--border-prm);
  display: flex;
  .contactus-wrap{
    h1{
      font-weight: 700;
      font-size: var(--rem-36);
      color: var(--z-font-anti);
    }
    h2{
      margin-top: var(--rem-10);
      font-weight: 600;
      font-size: var(--rem-20);
      color: var(--z-font-anti);
      line-height: 1;
      em{
        font-style: normal;
        color: orange;
      }
    }
    p{
      margin-top: var(--rem-14);
      font-weight: 500;
      line-height: 1.2;
      text-transform: lowercase;
      color: var(--z-font-def);
    }
  }
  .contactus-button{
    background-color: var(--z-bg-btn);
    color: var(--z-font-white);
    border-radius: var(--rem-20);
    padding: var(--rem-12) var(--rem-22);
    line-height: 1;
    margin-top: var(--rem-25);
    width: var(--rem-240);
    text-align: center;
    cursor: pointer;
  }
}
.contactus-h5{
  background-color: var(--bg-tab);
  border-radius: var(--rem-20);
  padding-top: var(--rem-10);
  border: 2px solid var(--border-prm-h5);
  position: relative;
  padding-bottom: var(--rem-95);
  padding-left: var(--rem-15);
  padding-right: var(--rem-15);
  h1{
    font-weight: 700;
    color: var(--z-font-anti);
    font-size: var(--rem-17);
  }
  h2{
    color: var(--z-bg-act);
    font-weight: 700;
    em{
      font-style: normal;
    }
  }
  p{
    font-size: var(--rem-12);
  }
  .contactus-button{
    background-color: var(--z-bg-btn);
    color: var(--z-font-white);
    border-radius: var(--rem-20);
    padding: var(--rem-12) var(--rem-22);
    line-height: 1;
    margin-top: var(--rem-25);
    width: var(--rem-240);
    text-align: center;
    cursor: pointer;
  }
  img{
    position: absolute;
    width: var(--rem-175);
    right: var(--rem-15);
    bottom: 0;
  }
}




